<template>

  <div v-if="isMobile">
    <img class="mImg" :src="image"/>
  </div>
  <div v-else class="w1200">
    <img class="pcImg" :src="image"/>
  </div>

</template>

<script>
  import {isMobile} from '../../../utils/util'
  import PlanAPI from '../../../repo/api/PlanAPI'
  import {formatDate} from '@/utils/format_utils'

  export default {
    name: 'certificate',
    data () {
      return {
        isMobile: isMobile(),
        certId: this.$route.params.certId,
        userId: this.$route.params.userId,
        certInfo: {},
        image: '',
      }
    },
    mounted () {
      PlanAPI.getCertDetail(this.certId, this.userId).then((result) => {
        let data = result.responseData
        this.certInfo = data
        this.drawPhoto()
      })

    },
    computed: {
      userName() {
        let info = this.certInfo.receiveInfo
        if (info) {
          return info.username
        }
        return '姓名'
      },
      certTime () {
        let info = this.certInfo.receiveInfo
        if (info) {
          let start = new Date(info.createtimeLong)
          let end = new Date(info.createtimeLong + 365 * 24 * 60 * 60 * 1000)
          return '证书有效期：' + formatDate(start, 'yyyy年MM月DD日') + '-' + formatDate(end, 'yyyy年MM月DD日')
        }
        return ''
      },
      certNum () {
        let info = this.certInfo.receiveInfo
        if (info) {
          return info.certificateNum
        }
        return ''
      },
      certPic () {
        let pic = this.certInfo.pic
        let typeIndex = pic.lastIndexOf('.')
        let typeStr = pic.substring(typeIndex)
        return pic + '.original' + typeStr
      }

    },

    methods: {

      drawPhoto () {
        let canvas = document.createElement('canvas')    //创建canvas
        canvas.width = 1080
        canvas.height = 1486
        let context = canvas.getContext('2d')        //创建画布
        let img = new Image()               //因为拿不到图片静态资源，所以创建图片标签
        img.setAttribute('crossOrigin', 'anonymous')       //解决图片跨域问题,也要放到赋值前，否贼大部分浏览器会报错
        img.src = this.certPic
        //加载图片
        img.onload = () => {
          //绘制图片
          context.drawImage(img, 0, 0, 1080, 1486)

          context.font = 'normal small-caps bold 48px arial'
          context.fillStyle = '#4d4d4d'
          context.textAlign = 'center'
          context.textBaseline = 'middle'
          context.fillText(this.userName, canvas.width / 2, canvas.height / 2)

          context.font = 'normal small-caps normal 24px arial'
          context.textAlign = 'center'
          context.textBaseline = 'middle' //设置绘制文本时的文本基线。
          context.fillStyle = '#7f7f7f'
          context.fillText(this.certTime, canvas.width / 2, canvas.height - 50)

          context.font = 'normal small-caps normal 24px arial'
          context.textAlign = 'right'
          context.textBaseline = 'middle' //设置绘制文本时的文本基线。
          context.fillStyle = '#7f7f7f'
          context.fillText(this.certNum, canvas.width - 80, 50)//1080*1486

          //合成图片
          this.image = canvas.toDataURL('image/png', 0.8)
        }

      }

    }
  }
</script>

<style scoped>

  .mImg {
    width: 100%;
    height: auto;

  }

  .pcImg {
    margin: auto;
  }

</style>
